<template>
	<div>
		<div class="smp-search smp_panel">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">服务编码生成</div>
			</div>
			<div class="smp_panel_body">
				<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="form" :rules="rules">
				
					<el-row>
						<el-col :span="8">
							<el-form-item label="服务系统:" prop="systemNo">
								<el-select v-model="form.systemNo" style="width: 100%" filterable remote
									reserve-keyword placeholder="请输入系统编号或名称" :remote-method="getsystems">
									<el-option v-for="item in systemList" :key="item.systemNo"
										:label="item.systemName" :value="item.systemNo">
										{{ item.systemName }}({{item.systemNo}})
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					
						<el-col :span="8">
							<el-form-item label="交易码:" prop="transCode">
								<el-input @keyup.enter.native="getList" v-model="form.transCode" placeholder="交易码"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="8">
							<el-form-item size="mini" style="text-align: right;">
								<el-button type="primary" plain @click="autoGenerate">生&nbsp;&nbsp;&nbsp;成</el-button>
								<!-- <el-button size="mini" type="primary" plain @click="execute">测试</el-button> -->
							</el-form-item>
						</el-col> 
					
					</el-row>
				</el-form>
			</div>
		</div>
		<div class="smp-search smp_panel">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">生成结果</div>
			</div>
			<div class="smp_panel_body">
				
				<el-table :data="list" size="mini" stripe style="width: 100%">
					<el-table-column prop="pubCode" label="服务编码(P值)" align="center" />
					<el-table-column prop="busCode" label="服务编码(R值)" align="center"/>
					<el-table-column prop="transCode" label="交易码" align="center"/>
				</el-table>	
			</div>
		</div>
		</div>
</template>

<script>
	"use strict";
	import {autoGeneratePubCode} from '@/api/consume.js';
	import {autoGenerateBusCode} from '@/api/demand.js';
	
	export default {
		data() {
			return {
				list:[],
				rules: {
					systemNo: [{
						required: true,
						message: "服务系统不能为空",
						trigger: ['blur', 'change']
					}],
					transCode: [{
						required: true,
						message: "交易码不能为空",
						trigger: ['blur', 'change']
					}]
				},
				pubCode:'',
				busCode:'',
				form:{
					systemNo:'',
					transCode:''
				}
				
			};
		},
		
			
		methods:{
			
			autoGenerate(){
				this.$refs["form"].validate(valid => {
					if (valid) {
							this.autoGenerateBusCode();
					}
				})
			},
			
			autoGenerateBusCode(){
				
				autoGenerateBusCode({"systemNo":this.form.systemNo}).then(response =>{ 
					this.busCode = response.data.extend;
					this.autoGeneratePubCode();
					})
			},
			
			autoGeneratePubCode(){
				autoGeneratePubCode().then(response =>{
					this.pubCode = response.data.extend;
					this.list.push({
						pubCode: this.pubCode,
						busCode: this.busCode,
						transCode: this.form.transCode
						})
					})
			}
			
		},
	}
</script>
<style scoped>
	.article {
		margin-top: -11px;
		margin-left: 0px;
		padding-left: 0px;
	}
</style>
